<template>
    <div class="layout">
        <ul>
            <li><router-link exact-active-class="active" to="/home"><span></span></router-link></li>
            <li><router-link exact-active-class="active" to="/search"><span></span></router-link></li>
            <li><router-link exact-active-class="active" to="/library"><span></span></router-link></li>
            <li><router-link exact-active-class="active" to="/mine"><span></span></router-link></li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "appNav"
}
</script>

<style lang="scss" scoped>
@import '@/assets/common/variable.scss';
.layout {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 1000;
    &::before {
        width: 100%;
        height: 100%;
        background: linear-gradient(
            to bottom,
            rgba(18, 18, 18, 0),
            rgba(18, 18, 18, 0.3),
            rgba(18, 18, 18, 0.8),
            #121212,
            #121212,
            #121212
        );
        filter: blur(3px);
        content: "";
        position: absolute;
        bottom: -10px;
        z-index: -1;
    }
    ul {
        height: 100px;
        padding-bottom: 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
        z-index: 10;
        li {
            a span {
                width: 25px;
                height: 25px;
                display: block;
                opacity: 0.5;
                background-size: contain;
                background-repeat: no-repeat;
            }
            &:nth-child(1) a {
                span {
                    background-image: url('../assets/img/ui/home.png');
                }
                &.active span {
                    background-image: url('../assets/img/ui/home.png');
                    opacity: 1;
                }
            }
            &:nth-child(2) a {
                span {
                    background-image: url('../assets/img/ui/search.png');
                }
                &.active span {
                    background-image: url('../assets/img/ui/search.png');
                    opacity: 1;
                }
            }
            &:nth-child(3) a {
                span {
                    background-image: url('../assets/img/ui/library.png');
                }
                &.active span {
                    background-image: url('../assets/img/ui/library.png');
                    opacity: 1;
                }
            }
            &:nth-child(4) a {
                span {
                    background-image: url('../assets/img/ui/mine.png');
                }
                &.active span {
                    background-image: url('../assets/img/ui/mine.png');
                    opacity: 1;
                }
            }
        }
    }
}
</style>